<template>
    <div class="box">
        <div class="title"><strong>申请列表</strong></div>
        <el-row :gutter="20">
            <el-col :span="24" :xs="24">
                <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px">
                    <el-form-item label="申请状态" prop="status">
                        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width: 200px;">
                            <el-option v-for="(dict, index) in statusOptions" :key="index" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="申请人" prop="keyword">
                        <el-input v-model="queryParams.keyword" placeholder="请输入姓名/手机号" clearable
                            style="width: 200px" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleQuery" style="width: 72px;height: 36px;font-size: 16px;">搜索</el-button>
                        <el-button @click="handleReset" style="width: 72px;height: 36px;font-size: 16px;">重置</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="list" class="table" header-row-class-name="table-header" border>
                    <el-table-column fixed prop="name" label="申请人" width="150" align="center" />
                    <el-table-column prop="mobile" label="账号" width="150" align="center" />
                    <el-table-column prop="create_time" label="申请时间" align="center" />
                    <el-table-column prop="status" label="申请状态" align="center">
                        <template #default="scope">
                            <el-tag v-if="scope.row.status === 0" type="warning">待审核</el-tag>
                            <el-tag v-else-if="scope.row.status === 1" type="success">已通过</el-tag>
                            <el-tag v-else type="error">已拒绝</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="handle_time" label="处理时间" align="center" />
                    <el-table-column prop="handle_user_name" label="处理人" width="120" align="center" />
                    <el-table-column label="操作" align="center">
                        <template #default="scope">
                            <el-button type="success" @click="handlePass(scope.row)" link v-if="scope.row.status === 0">
                                <el-icon>
                                    <Check />
                                </el-icon>
                                通过
                            </el-button>
                            <el-button type="danger" @click="handleReject(scope.row)" link
                                v-if="scope.row.status === 0">
                                <el-icon>
                                    <Close />
                                </el-icon>
                                拒绝
                            </el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <Pagination :total="total" :current-page="pageInfo.page" :page-size="pageInfo.limit"
                    @pagination-change="handlePaginationChange" />
            </el-col>
        </el-row>
    </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from '@/TUIKit/adapter-vue';
import { ApplyHandle, ApplyList } from '@/api/enterprise';
import Pagination from '@/components/Pagination.vue';
import { useCompanyDataStore } from '@/store/companys';
import {
  Check,
  Close
} from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const companyDataStore = useCompanyDataStore()

const total = ref(0)
const pageInfo = reactive({
    page: 1,
    limit: 10
})
const queryParams = reactive({
    status: null,
    keyword: '',
});
const list = ref([])
const statusOptions = [{
    label: '待审核',
    value: 0
}, {
    label: '已通过',
    value: 1
}, {
    label: '未通过',
    value: 2
}]

const getList = async () => {
    ApplyList({
        page: pageInfo.page,
        limit: pageInfo.limit,
        ...queryParams
    }).then(res => {
        list.value = res.data
        total.value = res.count
    })
}

const handleQuery = () => {
    pageInfo.page = 1
    list.value = []
    getList()
}

const handleReset = () => {
    queryParams.status = null
    queryParams.keyword = ''
    pageInfo.page = 1
    list.value = []
    getList()
}

const handlePaginationChange = ({ page, size }: { page: number; size: number }) => {
    pageInfo.page = page
    pageInfo.limit = size
    list.value = []
    getList()
}

const handlePass = (row: any) => {
    ElMessageBox.confirm(
        `是否确认 ${row.name} 加入企业`,
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ApplyHandle({
                id: row.id,
                status: 1
            }).then(res => {
                ElMessage.success('操作成功')
                getList()
                companyDataStore.getCompanyInfo()
            })
        })
        .catch((err) => {
            console.log(err)
        }) 
}

const handleReject = (row: any) => {
    ElMessageBox.confirm(
        `是否拒绝 ${row.name} 加入企业`,
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ApplyHandle({
                id: row.id,
                status: 2
            }).then(res => {
                ElMessage.success('操作成功')
                getList()
            })
        })
        .catch((err) => {
            console.log(err)
        })
}

onMounted(() => {
    getList()
})


</script>
<style lang="scss" scoped>
.box {
    background-color: #fff;
    border-radius: 10px;
    padding: 0 15px 20px;
    margin-top: 22px;
    height: calc(100vh - 430px);
    min-height: 300px;

    .title {
        height: 65px;
        line-height: 65px;
        border-bottom: solid 1px #e6e6e6;
        font-size: 20px;
        color: #333;
        margin-bottom: 15px;
    }

    .table{
        width: 100%;
        // max-height: calc(100vh - 584px);
        min-height: 100px;
        height: calc(100vh - 610px);
    }

    :deep(.el-table__header) {
        .table-header {
            th {
                font-size: 16px;
                background: #f3f8fb;
                height: 55px;
                color: #6f7070;
                font-weight: normal;
            }
        }
    }

}
</style>